
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>电子发票识别在线解析识别</title>
    <meta name="keywords" content="电子发票识别在线解析识别"/>
    <meta name="description" content="电子发票识别在线解析识别"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="/css/bootstrap.min.css-v=3.3.5.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css-v=4.4.0.css" rel="stylesheet">
    <link href="/interface/code-formatter.css" rel="stylesheet"/>
    <script src="/interface/code-formatter.js"></script>
    <script src="/interface/json2.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jsrender.min.js"></script>
    <style>
		#rawJson{width:100%; height: 80px;}
		.unstyled{list-style:none;}
    </style>
</head>
<body  class="gray-bg">
		<div class="row"><center><h1>电子普票、电子专票在线解析识别（非OCR识别，不能识别扫描图像）</h1></center></div>
		<div class="row">
            <div class="col-md-4"></div>
             <div class="col-md-4">
				 <p class="message">解析成功的文件会被立刻删除，解析失败的文件会留下做分析，发票数据不会存储，</p>
                <form role="form" id="form1" action="/invoice/extrat" enctype="multipart/form-data">
                    <div class="form-group">
                        <label>电子发票PDF、OFD文件</label>
                        <input type="file" name="file" class="form-control" onchange="$('input[name=url]').val('')" accept="application/pdf,.ofd"/>
                    </div>
                    <div class="form-group">
                        <label>或 电子发票PDF、OFD地址</label>
                        <input type="text" name="url" class="form-control"/>
                    </div>
                    <div>
						<a class="btn  btn-default" href="javascript:$('input[name=file]').val('');$('input[name=url]').val('https://www.publiccms.com/upload/%E9%98%BF%E9%87%8C%E4%BA%91-20201203-8110.68.pdf');$('#form1').submit();">测试PDF</a>
						<a class="btn  btn-default" href="javascript:$('input[name=file]').val('');$('input[name=url]').val('https://www.publiccms.com/upload/012001900311_34063477.ofd');$('#form1').submit();">测试OFD</a>
                        <input class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" value="提交">
                    </div>
                </form>
             </div>
             <div class="col-md-4"></div>
        </div>
	<script id="inv-tpl"  type="text/x-jsrender">
		<div class="row">
			<center><h1>{{:#data.title}}</h1></center>
		</div>
		<div class="row" >
            <div class="col-md-1"></div>
			<div class="col-md-3">机器编号：{{: #data.machineNumber}}</div>
			<div class="col-md-3"></div>
			<div class="col-md-3">
				<ul class="unstyled">
	                <li>发票代码：{{:#data.code}}</li>
	                <li>发票号码：{{:#data.number}}</li>
	                <li>开票日期：{{:#data.date}}</li>
	                <li>校验码：{{:#data.checksum}}</li>
	           </ul>
			</div>
            <div class="col-md-1"></div>
		</div>
		
		<div class="row">
            <div class="col-md-1"></div>
			<div class="col-md-5">
				<p>购买方</p>
				<ul class="unstyled">
					<li>名称：{{:#data.buyerName}}</li>
					<li>纳税人识别号：{{:#data.buyerCode}}</li>
					<li>地址、电话：{{:#data.buyerAddress}}</li>
					<li>开户行及账号：{{:#data.buyerAccount}}</li>
				</ul>
			</div>
			<div class="col-md-5">
			 <p>密码区</p>
			 <pre>{{:#data.password}}</pre>
			</div>
            <div class="col-md-1"></div>
		</div>
		<div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10">
			             <table class="table table-bordered">
                            <thead>
                                <tr>
								{{if type == '通行费'}}
									<th>项目名称</th>
                                    <th>车牌号</th>
                                    <th>类型</th>
                                    <th>通行日期起</th>
                                    <th>通行日期止</th>
								{{else}}
									<th>货物或应税劳务、服务名称</th>
                                    <th>规格型号</th>
                                    <th>单位</th>
                                    <th>数 量</th>
                                    <th>单 价</th>
								{{/if}}
                                    <th>金 额</th>
                                    <th>税率</th>
                                    <th>税 额</th>
                                </tr>
                            </thead>
                            <tbody>
				{{for detailList}}
								<tr>
                                    <td style="text-align:left">{{: #data.name}}</td>
                                    <td style="text-align:left">{{: #data.model}}</td>
                                    <td style="text-align:left">{{: #data.unit}}</td>
                                    <td style="text-align:right">{{: #data.count}}</td>
                                    <td style="text-align:right">{{: #data.price}}</td>
                                    <td style="text-align:right">{{: #data.amount}}</td>
                                    <td style="text-align:right">{{: #data.taxRate * 100}}%</td>
                                    <td style="text-align:right">{{: #data.taxAmount}}</td>
                                </tr>
				{{/for}}
								<tr>
									<td colspan=8>&nbsp;</td>
								</tr>
                                <tr>
                                	<td>合计</td>
                                	<td colspan="4">&nbsp;</td>
                                	<td style="text-align:right">￥{{:#data.totalAmount}}</td>
                                	<td>&nbsp;</td>
                                	<td style="text-align:right">￥{{:#data.taxAmount}}</td>
                                </tr>
                                <tr>
                                	<td>税价合计（大写）</td>
									<td colspan="4">ⓧ{{:#data.totalAmountString}} </td>
                                	<td colspan="3">（小写）￥{{:#data.totalAmount}}</td>
                                </tr>
                            </tbody>
                        </table>
            </div>
            <div class="col-md-1"></div>
		</div>
		<div class="row">
            <div class="col-md-1"></div>
			<div class="col-md-5">
				<p>销售方</p>
				<ul class="unstyled">
					<li>名称：{{:#data.sellerName}}</li>
					<li>纳税人识别号：{{:#data.sellerCode}}</li>
					<li>地址、电话：{{:#data.sellerAddress}}</li>
					<li>开户行及账号：{{:#data.sellerAccount}}</li>
				</ul>
			</div>
			<div class="col-md-5">
				<p>备注</p>
			</div>
            <div class="col-md-1"></div>
		</div>
		<div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-3">收款人：{{:#data.payee}}</div>
            <div class="col-md-3">复核：{{:#data.reviewer}}</div>
            <div class="col-md-4">开票人：{{:#data.drawer}}</div>
            <div class="col-md-1"></div>
        </div>
        </script>
        <div id="detail">
            <div class="row">
                <center><h1>这里将显示发票信息</h1></center>
            </div>
    	</div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <textarea id="rawJson">这里将显示发票数据</textarea>
                <div class="code-canvas"></div>
            </div>
            <div class="col-md-2"></div>
        </div>
 <script  type="text/javascript">
	 var message=$('.message').text();
 $("#form1").submit(function () {
	if($("input[name=file]").val() == ""&&$("input[name=url]").val() == "") {
		alert("请选择文件！")
	} else {
		if($("input[name=file]").val()==""){
			$('.message').text('还可以直接请求: /invoice/extrat?url='+encodeURIComponent($("input[name=url]").val()));
			setTimeout(function(){
				$('.message').text(message);
			}, 15000);
		}
	    $('#rawJson').val('loading...');
		var fd = new FormData(document.getElementById("form1"));
		 $.ajax({
 				url: "/invoice/extrat",
 			  	type: "POST",
 			  	data: fd,
 			  	dataType: "json",
 			  	processData: false,  // 不处理数据
 			  	contentType: false,   // 不设置内容类型
 			 	success: function (data) {
 			 		$("#detail").empty();
 			 		var tpl = $.templates("#inv-tpl");
					if(data.password){
						data.password=data.password.replace(new RegExp('<','g'),'&lt;').replace(new RegExp('>','g'),'&gt;');
					}
 			 		$('#detail').append(tpl.render(data));
 			 		$('#rawJson').val(JSON.stringify(data));
 			 		process($('#rawJson').val(),$('.code-canvas'));
             	},
             	error: function(xhr, status, response)
             	{
             	   $('#rawJson').val(xhr.responseText);
             	  process($('#rawJson').val(),$('.code-canvas'));
             	}
		});
	}
	return false;
});
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?bd81f02e5329554415de9ee15f916a98";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>